<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>找好友</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/fonts/line-icons.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/main.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/responsive.css">
</head>
<body style="overflow: auto;">
<div class="container-fluid">
	<div class="breadcrumb-wrapper row">
		<div class="col-12 col-lg-3 col-md-6">
			<h4 class="page-title">查找好友</h4>
		</div>
		<div class="col-12 col-lg-9 col-md-6">
			<ol class="breadcrumb float-right">
				<li class="active">好友管理</li>
				<li class="active"> / 查找好友</li>
			</ol>
		</div>
	</div>
</div>
<div class="container-fluid">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-body">
					<form class="form-inline">
						<label>查找好友：</label>
						<input type="text" class="form-control mb-2 mr-sm-2" id="username" placeholder="账号"/>
						<input type="text" class="form-control mb-2 mr-sm-2" id="school" placeholder="学校"/>
						<input type="text" class="form-control mb-2 mr-sm-2" id="faculty" placeholder="学院"/>
						<input type="text" class="form-control mb-2 mr-sm-2" id="userClass" placeholder="班级"/>
						<input type="button" class="btn btn-success" id="findUser" value="查找">
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="container-fluid">
	<div class="row" id="theUser">
		
	</div>
</div>
<div class="modal fade groupModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="display: none;">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">选择分组</h5>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			</div>
			<div class="modal-body">
				<input type="hidden" id="userFriendId" />
				<div class="form-group row">
					<h5 class="col-sm-3">组别</h5>
					<div class="col-sm-7">
						<select class="form-control form-control-lg" id="groupId"></select>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
				<input type="button" class="btn btn-common" id="sureAdd" value="确定"/>
			</div>
		</div>
	</div>
</div>
<script src="../assets/js/jquery-min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script>
    //项目根路径
    var ctx = window.parent.ctx;
	var user = window.parent.user;
	var par = $("body");
	var pheight = $(window.parent.document).find(".main-content").height();
    $(function () {

    	par.height(pheight);

        $("#findUser").click(function () {
			$("#theUser").empty();
            $.ajax({
                type: "post",
                url: ctx+"/user/findUserByMessage",
				xhrFields: {
					withCredentials: true
				},
                data: {username:$("#username").val(),school:$("#school").val(),faculty:$("#faculty").val(),userClass:$("#userClass").val()},
                success: function (data) {
					for(var i=0;i<data.length;i++){
						var str = "<div class='col-md-6 col-lg-6 col-xlg-4'><div class='card card-body'><div class='row align-items-center'>"+
							"<div class='col-md-4 col-lg-3 text-center'><a href='#'><img style='height:160px;width:160px;' class='img-circle"+
							" img-fluid' src='"+data[i].profilePhoto+"' alt='user'/></a></div><div class='col-md-8 col-lg-9'><h3 class='box-title'>"+
							data[i].nickname+"</h3><small>"+data[i].school+", "+data[i].faculty+", "+data[i].userClass+"</small>"+
							"<address class='m-0'><p class='m-0'>"+data[i].introduce+"</p><abbr>账号：</abbr>"+data[i].username;
						if(data[i].isPass=='0'){
							str += "<p class='m-0'>身份审核：审核中</p>";
						}else if(data[i].isPass='1'){
							str += "<p class='m-0'>身份审核：审核通过</p>";
						}else{
							str += "<p class='m-0'>身份审核：未通过</p>";
						}
						str += "</address><input type='button' class='btn btn-success' value='添加' data-toggle='modal' data-target='.groupModal' onclick='initModal("+
							data[i].id+")'></div></div></div></div>";
						$("#theUser").append(str);
					}
                    
                    // 父页面自适应子页面高度
                    par.height(pheight);
                }
            })
        });
		
		$("#sureAdd").click(function () {
			var strJson = {"targetUserId":$('#userFriendId').val(),"groupId":$('#groupId').val(),"isRecently":'0'};
			$.ajax({
			    type: "post",
			    url: ctx+"/websocket/addFriend",
				xhrFields: {
				    withCredentials: true
				},
				contentType: "application/json",
				data: JSON.stringify(strJson),
			    success: function (data) {
			        alert(data);
			    },
			    error: function (data) {
			        console.log("ajax错误");	
			    }
			})
		});
    });
	
	function initModal(id){
		$("#userFriendId").val(id);
		$("#groupId").empty();
		$.ajax({
			type: "post",
			url: ctx+"/group/findGroupNameByUserId",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				for(var i=0;i<data.length;i++){
					$("#groupId").append("<option value='"+data[i].id+"'>"+data[i].groupName+"</option>");
				}
			}
		})
	}
</script>
</body>
</html>